<!--
 * @Author: ydli
 * @LastEditTime: 2021-04-26 23:08:26
 * @Description: 
-->
<template>
  <div class="container">
    <router-view name="GlobalHeader"></router-view>
    <loader
      v-if="isLoading"
      text="拼命加载中"
      background="rgba(0,0,0,.5)"
    ></loader>
    <!-- <message
      type="error"
      :message="error.message"
      v-if="error.status"
    ></message> -->
    <router-view></router-view>
    <router-view name="GlobalFooter"></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed,watch } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "./store";
import "bootstrap/dist/css/bootstrap.min.css";
import Loader from "./components/Loader.vue";
import CreateMessage from './components/createMessage';

export default defineComponent({
  name: "App",
  components: {
    Loader
  },
  setup() {
    let store = useStore<GlobalDataProps>();
    const isLoading = computed(() => store.state.loading);
    const error = computed(() => store.state.error);

    watch(() => error.value.status,() => {
      const {status,message} = error.value;
      if(status && message){
        CreateMessage(message,'error');
      }
    })
    return {
      isLoading
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
